<template>
  <div class="profile-container">
    <el-card shadow="hover" class="profile-card">
      <template #header>
        <div class="profile-header">
          <h2>个人资料</h2>
        </div>
      </template>

      <div class="profile-content">
        <div class="profile-avatar">
          <el-avatar :size="120" :src="user.avatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'">
            {{ user.username?.charAt(0).toUpperCase() }}
          </el-avatar>
        </div>

        <div class="profile-info">
          <el-descriptions :column="1" border>
            <el-descriptions-item label="用户名">{{ user.username || '未设置' }}</el-descriptions-item>
            <el-descriptions-item label="姓名">{{ user.fullName || '未设置' }}</el-descriptions-item>
            <el-descriptions-item label="角色">{{ user.role || '未设置' }}</el-descriptions-item>
            <el-descriptions-item label="邮箱">{{ user.email || '未设置' }}</el-descriptions-item>
            <el-descriptions-item label="电话">{{ user.phone || '未设置' }}</el-descriptions-item>
            <el-descriptions-item label="公司">{{ user.companyName || '未设置' }}</el-descriptions-item>
          </el-descriptions>
        </div>

        <div class="profile-actions">
          <el-button type="primary" @click="editProfile">编辑资料</el-button>
          <el-button type="warning" @click="changePassword">修改密码</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useAuthStore } from '@/stores/auth';
import { ElMessage } from 'element-plus';

const authStore = useAuthStore();
const user = ref({});

onMounted(() => {
  // 从authStore获取用户信息
  user.value = authStore.user || {};
  
  // 如果需要更详细的信息，可以调用API
  // fetchUserDetails();
});

// const fetchUserDetails = async () => {
//   try {
//     const response = await axios.get('http://localhost:8080/api/users/me');
//     user.value = response.data;
//   } catch (error) {
//     ElMessage.error('获取用户信息失败');
//   }
// };

const editProfile = () => {
  ElMessage.info('编辑资料功能开发中');
};

const changePassword = () => {
  ElMessage.info('修改密码功能开发中');
};
</script>

<style scoped>
.profile-container {
  max-width: 800px;
  margin: 0 auto;
}

.profile-card {
  border-radius: 8px;
}

.profile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.profile-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.profile-avatar {
  margin-bottom: 24px;
}

.profile-info {
  width: 100%;
  margin-bottom: 24px;
}

.profile-actions {
  display: flex;
  gap: 16px;
  margin-top: 24px;
}

:deep(.el-descriptions__body) {
  background-color: #f9f9f9;
}

:deep(.el-descriptions__label) {
  width: 100px;
}
</style>
